<template>
  <el-table
    :data="tableData"
    border
    ref="singleTable"
    :highlight-current-row="highlightCurrentRow"
    @current-change="handleCurrentChange"
    @selection-change="handleSelectionChange"
    :row-class-name="tableRowClassName"
    @select="handleSelect"
    :height="height"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column
      type="selection"
      width="55"
      :selectable="selectHandle"
      v-if="typeCheckbox"
      >
    </el-table-column>
    <template v-for="(item,index) in tableTitle">
      
      <!-- //普通显示 -->
      <el-table-column :sortable="item.sortable" :width="item.width" v-if="item.type == 1" :fixed="item.fixed" :prop="item.prop" :label="item.name" :key="index">
        <template slot-scope="scope">
          <div>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <!-- 复选框 -->
      <el-table-column :width="item.width" v-if="item.type == 3" :prop="item.prop" :label="item.name" :sortable='item.sortable' :key="index">
        <template slot-scope="scope">
          <el-checkbox v-if="item.type == 3" v-model="scope.row[item.prop]"
                       :checke="scope.row[item.prop]"></el-checkbox>
          <div v-if="item.type != 3">{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <!-- 操作按钮 -->
      <el-table-column :width="item.width" :fixed="item.fixed" v-if="item.type == 4" :prop="item.prop" label="操作" 
                       :key="index">
        <template slot-scope="scope"  >
            <div>
              <el-button
                size="mini"
                
                @click="handleEdit(it.number ,scope.row)" 
                v-for='(it) in item.arr' 
                :key="it.number" 
                :type="it.flag != 2 ? it.type : scope.row.status == 1 ? 'danger' : 'success'">
                {{ it.flag != 2 ? it.name : scope.row.status == 1 ? '禁用' : '启用' }}
              </el-button>
            </div>
        </template>
      </el-table-column>
      <!-- select操作按钮 -->
      <el-table-column :width="item.width" :fixed="item.fixed" v-if="item.type == 8" :prop="item.prop" label="操作"
                       :key="index">
        <template slot-scope="scope">
          <el-dropdown size="primary" @command="handleCommand($event,scope.row)">
            <el-button type="primary" size="mini">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" >
              <div v-for="(item) in item.arr"  :key="item.value">
                  <el-dropdown-item :command="item.value" v-if="scope.row.advice_type == '项目' && item.name != '抄送药房'">{{ item.name }}
                  </el-dropdown-item>
                  <el-dropdown-item :command="item.value" v-if="scope.row.advice_type != '项目'">{{ item.name }}
                  </el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <!-- 状态按钮 -->
      <el-table-column :width="item.width" v-if="item.type == 5" :prop="item.prop" :label="item.name" :key="index">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.flag"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="handleSwitchChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
<!--      tag 展示-->
      <el-table-column :width="item.width" v-if="item.type == 6" :prop="item.prop" :label="item.name" :key="index">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row[item.prop] === '成功' ? 'success' : 'danger'"
            disable-transitions>{{ scope.row[item.prop] }}
          </el-tag>
        </template>
      </el-table-column>
       <el-table-column :width="item.width" :fixed="item.fixed" v-if="item.type == 9" :prop="item.prop" label="操作" :key="index">
        <template slot-scope="scope" >
             <div style="display:flex;justify-content: center;">
               <span v-for='(it) in item.arr' :key="it.number" @click="handleEdit(it.number ,scope.row)" style="marginRight:10px;"   >
                <el-button
                v-if="it.name == '皮试' && scope.row.skin_test == 1"
                size="mini"
                :type="it.flag != 2 ? it.type : scope.row.status == 1 ? 'danger' : 'success'">
                <div >{{ it.flag != 2 ? it.name : scope.row.status == 1 ? '禁用' : '启用' }}</div>
                </el-button>
                <el-button
                v-else-if="scope.row.get_advice.advice_type == 2 && it.name == '退药'"
                size="mini" 
                :type="it.flag != 2 ? it.type : scope.row.status == 1 ? 'danger' : 'success'">
                <div >{{it.name}}</div>
                </el-button>
                <el-button
                v-else-if="it.name != '皮试' && it.name != '退药'"
                size="mini"
                :type="it.flag != 2 ? it.type : scope.row.status == 1 ? 'danger' : 'success'">
                <div >{{ it.flag != 2 ? it.name : scope.row.status == 1 ? '禁用' : '启用' }}</div>
                </el-button>
              </span>
            </div>
            <!-- <div v-if="scope.row.skin_test != 1">
              <el-button
                size="mini"
                
                @click="handleEdit(it.number ,scope.row)" 
                v-for='(it) in item.arr' 
                :key="it.number" 
                :type="it.flag != 2 ? it.type : scope.row.status == 1 ? 'danger' : 'success'">
                {{ it.flag != 2 ? it.name : scope.row.status == 1 ? '禁用' : '启用' }}
              </el-button>
            </div> -->
        </template>
      </el-table-column>
    </template>
  </el-table>
  
</template>

<script>
var  that;
export default {
   name:"fromList",
   data(){
     return {
      value:"",
      activity:0,
  
     }
   },
   created(){
   },
   mounted(){
       that=this
   },
  //  props:["tableTitle","tableData","checkbox"],
  props: {
    tableTitle: {
      type: Array,
      default: ''
    },
    tableData: {
      type: Array,
      default: ''
    },  
     
    checkbox: {
      type: Boolean,
      default: false
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    typeCheckbox:{
      type:Boolean,
      default:false
    },
    activityInfo:{
      type:Number,
      default:0
    },
     height:{
      type:Number,
      default:0
    },
  
    activityFlag:{
      type:Boolean,
      default:false
    },
     activityFlag2:{
      type:Boolean,
      default:false
    },
    performFlag:{
      type:Boolean,
      default:false
    },
    selectHan:{
      type:Number,
      default:10
    }
  },
 
  methods: {
    selectHandle(row){
      console.log(this.selectHan)
      if(this.selectHan == 0){
        if(row.advice_type == '项目'){
          
          return false
        }else{
          return true
        }
      }else{
        return true
      }
      
    },
    handleSelect(row,index){
      //  console.log(row)
      //  console.log(index)
      //  console.log("值")
    },
    tableRowClassName({row, rowIndex}) {
      if(row.is_send == 1){
        if(row.status==3){
            console.log("进入")
        return `is_send-${row.is_send}`
        }
         
      }
      if(this.activityFlag){
        return `status-${row.status}`
      }else if(this.performFlag){
        return `status-execute-${row.status}` 
      }else if(this.activityInfo == rowIndex){
        return `success-row`   
      }else if(this.activityFlag2){
        console.log(row,'row000')
        if(row.advice_djd!=0||row.advice_dtz!=0||row.advice_dzx!=0)
          return `status-advice-2` 
      }
    },
    indexMethod(index) {
      return (index + 1) * 1;
    },
    handleSelectionChange(e) {
      this.$emit("handelChange", e)
    },
    //  点击单选选中数据
    handleCurrentChange(e) {
      this.$emit("handleCurrentChange", e)
    },
    handleEdit(e, data) {
      this.$emit("handleEdit", {key: e, data: data})
    },
    handleSwitchChange(data) {
      this.$emit("handleSwitchChange", {data: data})
    },

    handleDelete(e, data) {
      this.$emit("handleDelete", {key: e, data: data})
    },
    handleCommand(e, q) {
      this.$emit("handleCommand", {key: e, data: q})
    },

  }
}
</script>

<style lang="scss">
.success-row {
  background: #409EFF !important;
}
.button {
  background: #000000;
  color: #fff;
}
.el-table{
  color:#000000
}
//  .el-table tbody tr {
//   pointer-events:none;
// }
// /deep/.el-table tbody tr:hover>td { 
//    background:transparent!important;
//   }
//   .el-table .el-table__row:hover>td {
//   background-color: transparent !important;
// }
// .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
//    background-color: transparent !important;
// }
.el-table .status-1 {
  background: #DCDFE6 !important;
  
}

.el-table .status-2 {
  background: #65da8a !important;
  
}

.el-table .status-3 {
  background: #79a5ec !important;
  
}

.el-table .status-4 {
  background: #e7bb6a !important;
  
}

.el-table .status-5 {
  background: #a8a493 !important;
  
}

.el-table .status-6 {
  background: #e4899d !important;
  
}

.el-table .status-7 {
  background: #867cf1 !important;
  
}
.el-table .is_send-0 {
  background: #9b93f1;
   color:#000 !important
}

.el-table .is_send-1 {
  background: #b0c942;
 
}


.status-execute-1{
  background: #4ea7e2 !important;
} 
.status-execute-2{
  background: #FFCCFF !important;
}
.status-execute-3{
  background: #CC9933 !important;
}
.status-advice-2{
  background: #eb5a40 !important;
}
</style>
